<template>
  <div id="app">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

    <el-form-item label="">
      <el-input v-model="formInline.userId" placeholder="请输入用户ID"></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-input v-model="formInline.valueId" placeholder="请输入商品ID"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查 询</el-button>
    </el-form-item>
      </el-form>
      
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="userId"
          label="用户ID"
          width="150">
        </el-table-column>
        <el-table-column
          prop="valueId"
          label="商品ID"
          width="120">
        </el-table-column>
        <el-table-column
          prop="type"
          label="打分"
          width="120">
        </el-table-column>
        <el-table-column
          prop="content"
          label="评论内容"
          width="200">
        </el-table-column>
        <el-table-column
          fixed
          prop="picUrls"
          label="评论图片"
          width="150">
          <template slot-scope="scope">
          <img v-for="(item,index) in scope.row.picUrls" :src="item"  min-width="70" height="70" />
        </template>
        </el-table-column>
        <el-table-column
          prop="adminContent"
          label="回复"
          width="150">
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="时间"
          width="200">
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="primary"  @click="addclick(scope.row.id)">回 复</el-button>
            <el-button type="danger" @click="delPlan(scope.row.id)" >删 除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="formInline.pageNo"
      :page-size="formInline.pageSize"
      >
    </el-pagination>

    <el-dialog title="回 复" :visible.sync="addFrm">
      <el-form :model="form">
          <input type="hidden" v-model="form.id"/>
        <el-form-item label="回复内容" :label-width="formLabelWidth">
          <el-input v-model="form.adminContent" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFrm = false">取 消</el-button>
        <el-button @click="addPlan">确定</el-button>
      </div>
    </el-dialog>  
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
   
    delPlan(id){
        alert(id);
      var $this=this;
      this.axios({
        method:'get',
        url: "http://localhost:8083/comment/delete",
        params:{"id":id}
      }).then(function(res){
        alert("删除成功");
         $this.getList();
      })
    },
    
    addPlan(){
      var $this=this;
      this.axios({
        method:'post',
        url: "http://127.0.0.1:8083/comment/add",
        data: this.form,
      }).then(function(res){
        alert("添加成功");
         $this.getList();
        $this.addFrm=false;
      })
       
    },
    addclick(id){
      var $this=this;
      this.form.id=id;
      this.addFrm=true;
    },
    handleSizeChange(val) {
      this.formInline.pageSize=val;
      this.getList();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.formInline.pageNo=val;
        this.getList();
        console.log(`当前页: ${val}`);
      },
    onSubmit() {
        this.getList();
        console.log('submit!');
      },
    getList(){
      var $this=this;
      this.axios({
      method:'get',
      url: "http://localhost:8083/comment/list",
      params:this.formInline
    }).then(function(res){
        console.log(res);
        $this.tableData=res.data.obj.list; 
        $this.total=res.data.obj.total;
    });
    }
  },
  data () {
    return {
      //picUrls:[],
      formLabelWidth: '120px',
      addFrm:false,
      tableData:[],
      formInline: {
          pageNo: 1,
          pageSize:20
        },
        form:{
          id:'',
          adminContent:'',
        },
        total:0,
    }
  },mounted(){
    this.getList();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>